<template>
  <!-- 单行组件：文本、输入框、slot -->
  <div
    v-if="prefix && prefixWidth != 0"
    class="any-outsidebar"
  >
    <div
      :class="minlength > 0 ? 'any-prefix' : 'any-prefix2'"
      :style="
        prefixWidth ? 'min-width:' + prefixWidth + ';width:' + prefixWidth : ''
      "
    >
      {{ prefix }}
    </div>
    <el-input
      class="any-input"
      :style="inputStyle"
      v-model="elValue"
      :type="elType"
      :rows="lines"
      :maxlength="elMaxlength"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      size="medium"
      @mousewheel.native.prevent
      @keydown.native="keypressClick"
      @input="changeClick"
    ></el-input>
    <!-- 扩展slot -->
    <slot name="suffix"></slot>
  </div>

  <!-- 单个输入框 -->
  <el-input
    v-else
    class="any-input"
    :style="inputStyle"
    v-model="elValue"
    :type="elType"
    :rows="lines"
    :maxlength="elMaxlength"
    :placeholder="placeholder"
    :disabled="disabled"
    :readonly="readonly"
    size="medium"
    @mousewheel.native.prevent
    @keydown.native="keypressClick"
    @input="changeClick"
  ></el-input>
</template>

<script>
import anyfishUI from "../../index.js";
export default {
  name:"mm-input",
  props: {
    inputStyle: {// 输入框样式
      type: String,
      default: null
    },

    obj: {// InputObj
      type: Object,
      default: function () {
        return null;
      }
    },

    objKey: {// 数据对应InputObj的key值
      type: String,
      default: ""
    },

    prefix: {// 左边的文本内容
      type: String,
      default: null
    },

    prefixWidth: {// 左边的文本宽度：3.6rem、10px、20%等，为0则不显示，为空则自适应
      type: String,
      default: null
    },

    type: {// text、integer、number、integerAll、numberAll、password、passwordNumber、phone、carNumber、idCard、email、http、https
      type: String,
      default: "text"
    },

    lines: {// 行数
      type: Number,
      default: 1
    },

    placeholder: {// 输入框为空时的提示文字
      type: String,
      default: null
    },

    minlength: {// 数据的最小长度
      type: Number,
      default: 0
    },

    maxlength: {// 数据的最大长度
      type: Number,
      default: 140
    },

    disabled: {// 是否不可用
      type: Boolean,
      default: false
    },

    readonly: {// 是否只读
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      elValue: null,
      timer: null
    }
  },

  computed: {
    elType() {
      if (this.lines > 1) {
        return "textarea";
      }
      if (this.type == "integer" || this.type == "number" || this.type == "integerAll" || this.type == "numberAll" || this.type == "phone") {
        return "number";
      }
      if (this.type == "password" || this.type == "passwordNumber") {
        return "password";
      }
      return "text";
    },

    elMaxlength() {
      if (this.type == "phone") {
        return 11;
      }
      return this.maxlength;
    }
  },

  watch: {
    obj() {
      this.register();
    },

    objKey() {
      this.register();
    },

    type() {
      this.changeClick(null);
    }
  },

  mounted() {
    this.register();
  },

  destroyed() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
    this.obj._unRegister(this.objKey);
  },

  methods: {
    register() {
      let self = this;
      this.obj._watch(this.objKey, function (value) {
        self.elValue = value;
      }, function (value) {
        if (typeof value == "string") {
          if (value.length > 0) {
            if (self.type != "text") {
              value = value.trim();
            }
            if (value.length > self.elMaxlength) {
              value = value.substring(0, self.elMaxlength);
            }
          }
        }
        return value;
      });
      this.obj._register(this.objKey, function () {
        return self.checkData(self.obj[self.objKey], self.type, self.minlength, self.prefix ? self.prefix : "内容");
      });
    },

    checkData(data, type, minlength, prefix) {
      if (type == "passwordNumber") {
        type == "number";
      }
      let resultData;
      if (data == undefined || data == null) {
        resultData = null;
      } else if (typeof data == "string") {
        resultData = data.trim();
      } else {
        resultData = data + "";
      }
      if (resultData == null || resultData.length < 1) {
        if (minlength > 0) {
          anyfishUI.api.toast("请输入" + prefix);
          return false;
        }
        return true;
      }
      if (resultData.length < minlength) {
        anyfishUI.api.toast(prefix + "至少需要输入" + minlength + "位");
        return false;
      }
      if (!anyfishUI.api.checkData(resultData, type)) {
        if (type == "integer") {
          anyfishUI.api.toast(prefix + "只能输入正整数");
        } else if (type == "number") {
          anyfishUI.api.toast(prefix + "只能输入正数");
        } else if (type == "integerAll") {
          anyfishUI.api.toast(prefix + "只能输入整数");
        } else if (type == "numberAll") {
          anyfishUI.api.toast(prefix + "只能输入数字");
        } else if (type == "phone") {
          anyfishUI.api.toast(prefix + "的输入格式不正确");
        } else if (type == "carNumber") {
          anyfishUI.api.toast(prefix + "的输入格式不正确");
        } else if (type == "idCard") {
          anyfishUI.api.toast(prefix + "的输入格式不正确");
        } else if (type == "email") {
          anyfishUI.api.toast(prefix + "的输入格式不正确");
        } else if (type == "http") {
          anyfishUI.api.toast(prefix + "需要以http://或者https://为开头");
        } else if (type == "https") {
          anyfishUI.api.toast(prefix + "需要以https://为开头");
        }
        return false;
      }
      return true;
    },

    keypressClick(e) {
      if (this.type == "phone") {
        if (e && e.key && (e.key == "e" || e.key == ".")) {
          e.returnValue = false;
          return false;
        }
      }
      return true;
    },

    changeClick(value) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.timer = null;
        this.obj[this.objKey] = value;
        this.$emit("change", value);
      }, 300);
    }
  }
}
</script>

<style scoped>
.any-outsidebar {
  margin: 0.5rem 1rem;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
}

.any-prefix2 {
  margin-right: 0.5rem;
  font-size: 0.8rem;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.any-prefix {
  margin-right: 0.5rem;
  font-size: 0.8rem;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.any-prefix::before {
  margin: 1px;
  color: #ee0a24;
  font-size: 14px;
  content: "*";
}

.any-input {
  width: 220px;
}
</style>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>